<template>
    <div>
        <el-container>
            <el-header class="customer-header">
                <el-button @click="logic.isOpen = true">用户新增</el-button>
            </el-header>
            <el-main>
                <el-table :data="tableData" style="width: 100%">
                    <el-table-column type="index" label="序号" />
                    <el-table-column property="user_NickName" label="用户昵称" />
                    <el-table-column property="user_Email" label="邮箱" />
                    <el-table-column property="user_Phone" label="手机号" />
                    <el-table-column property="addTime" label="创建时间">
                        <template #default="scope">
                            <span>{{ scope.row.addTime }}</span>
                        </template>
                    </el-table-column>
                </el-table>
            </el-main>
        </el-container>
         <!--弹窗-->
    <el-dialog v-model="logic.isOpen" title="用户信息新增" width="500">
        <el-form :model="form">
            <el-form-item label="账号" :label-width="formLabelWidth">
                <el-input v-model="form.user_Account" autocomplete="off" />
            </el-form-item>
            <el-form-item label="密码" :label-width="formLabelWidth">
                <el-input type="password" v-model="form.user_Password" autocomplete="off" />
            </el-form-item>
            <el-form-item label="昵称" :label-width="formLabelWidth">
                <el-input v-model="form.user_NickName" autocomplete="off" />
            </el-form-item>
            <el-form-item label="邮箱" :label-width="formLabelWidth">
                <el-input v-model="form.user_Email" autocomplete="off" />
            </el-form-item>
            <el-form-item label="手机号" :label-width="formLabelWidth">
                <el-input v-model="form.user_Phone" autocomplete="off" />
            </el-form-item>
            <el-form-item label="角色" :label-width="formLabelWidth">
                <el-tree ref="treeRef" style="max-width: 600px" :data="data" show-checkbox default-expand-all
                    node-key="id" highlight-current :props="defaultProps" />
            </el-form-item>
            <el-form-item label="部门" :label-width="formLabelWidth">
                <el-select v-model="form.user_DeptId" placeholder="--请选择--">
                    <!--@vue-ignore-->
                    <el-option v-for="item in depts" :key="item.dept_Id" :label="item.dept_Name"
                        :value="item.dept_Id" />
                </el-select>
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="logic.isOpen = false">取消</el-button>
                <el-button type="primary" @click="AddUser">
                    确认
                </el-button>
            </div>
        </template>
    </el-dialog>
    </div>
   
</template>

<script setup lang="ts">
import axios from 'axios'
import { ElMessage, ElTree } from 'element-plus'
import { ref, reactive, onMounted, watch } from 'vue'

const logic = reactive(
    {
        isOpen: false
    }
)
const formLabelWidth = '140px'
const form = reactive({
    user_Id: "",
    user_Account: "",
    user_Password: "",
    user_NickName: "",
    user_Email: "",
    user_Phone: "",
    user_IsLocked: false,
    user_DeptId: "",
    user_RoleIds: ""

})

const treeRef = ref<InstanceType<typeof ElTree>>()

const defaultProps = {
    children: 'children',
    label: 'label',
    url: 'url'
}

//级联对象
const data = ref([])

const QueryRoleCascader = () => {
    axios.get("http://localhost:5115/api/RBAC/GetURCascader/GetURCascaderAsync")
        .then(res => {
            //console.log(res);
            if (res.data.code == 200) {
                data.value = res.data.data
            }
        })
}

const depts = ref([])
//获取部门信息
function GetDept() {
    axios.get("http://localhost:5115/api/RBAC/QueryDept/QueryDeptAsync")
        .then(res => {
            depts.value = res.data.data
        })
}

//新增用户
function AddUser() {
    //console.log(form.user_Account.length);
    //校验
    form.user_RoleIds = treeRef.value!.getCheckedKeys(false).toString();
    console.log(form.user_RoleIds);
    if (form.user_Account.length == 0) {
        ElMessage.error("请输入账号!");
        return;
    }
    if (form.user_Password.length == 0) {
        ElMessage.error("请输入密码!");
        return;
    }
    if (form.user_Email.length == 0) {
        ElMessage.error("请输入邮箱!");
        return;
    }
    if (form.user_Phone.length == 0) {
        ElMessage.error("请输入手机号!");
        return;
    }
    if (form.user_DeptId.length == 0) {
        ElMessage.error("请选择部门!");
        return;
    }
    if (form.user_RoleIds.length == 0) {
        ElMessage.error("请选择角色!");
        return;
    }
    axios.post("http://localhost:5259/api/User/InsertUser/InsertUserAsync", form)
        .then(res => {
            if (res.data.code == 200) {
                ElMessage.success("新增成功!");
                logic.isOpen = false
            }
            else {
                ElMessage.error(res.data.message);
                return;
            }
        })
}

const tableData = ref<any>([])

//分页数据
const pageData = reactive(
    {
        pageIndex: 1,
        pageSize: 10,
        totalCount: 0,
        totalPage: 0
    }
)
//监听分页对象
watch(pageData, () => {
    getTableData();
})
//条件对象
const query_condition = reactive(
    {
        user_Name: "",
        user_Phone: "",
    }
)
//获取数据
function getTableData() {
    axios.get("http://localhost:5115/api/User/QueryUser/QueryUserAsync",
        {
            params: {
                user_Name: query_condition.user_Name,
                user_Phone: query_condition.user_Phone,
                pageIndex: pageData.pageIndex,
                pageSize: pageData.pageSize
            }

        }
    )
        .then(res => {
            tableData.value = res.data.data.data
            pageData.totalCount = res.data.data.totalCount
            pageData.totalPage = res.data.data.totalPage
        })
}
//钩子函数
onMounted(() => {
    getTableData();
    QueryRoleCascader();
    GetDept();
})

</script>

<style scoped>
/* 添加一些样式，如果需要的话 */
.customer-header {
    background-color: transparent;
    /* 将头部背景设为透明 */
}
</style>